<ul>
      <li class="li_title_doc li_bg_color">
          <div class="li_text_rigth texto_titulo">Documentos</div>
          <div class="li_icon_rigth"><?php echo image_tag('implementacion/icon_titulo_doc.gif') ?></div>
      </li>
      <li class="li_title_doc li_bg_color_gris" style="padding-top: 10px;height:33px">
          <div class="content_li_hover" id="mostrar-acuerdo">
              <div class="li_text_rigth texto acuerdos-actas">Acuerdos</div>
              <div class="li_icon_rigth">
                  <div id="img-ck-acuerdo" class="style_check" style="float: right;"></div>
                  <input style="cursor: pointer;display: none;" type="checkbox" name="ck-acuerdo" id="ck-acuerdo" checked  />
              </div>
          </div>
      </li>
      <li class="li_title_doc li_bg_color_gris" style="padding-bottom:10px;">
          <div class="content_li" id="mostrar-acta">
              <div class="li_text_rigth texto acuerdos-actas">Actas</div>
              <div class="li_icon_rigth">
                  <div id="img-ck-acta" class="style_uncheck" style="float: right;"></div>
                  <input style="cursor: pointer;display: none;" type="checkbox" name="ck-acta" id="ck-acta" />
              </div>
          </div>
      </li>
      <li class="li_title_doc li_bg_color_etiquetas">
          <div class="li_text_rigth texto_titulo">Ver documentos</div>
          <div class="li_icon_rigth"><?php echo image_tag('implementacion/titulo_etiq.gif') ?></div>
      </li>
      <li class="li_title_doc li_bg_color_gris" style="padding-bottom:10px;padding-top: 10px;height: auto;float: left;width: 100%;">
           <div style="float: left;margin-left: 10px;" class="texto">
               <div style="font-size: 12px;"><input onclick="filter_doc()"  type="radio"  name="rd_estado" value="todos"  checked />Todos</div>
               <div style="font-size: 12px;"><input onclick="filter_doc()"  type="radio"  name="rd_estado" value="pendientes" />Pendientes</div>
               <div style="font-size: 12px;"><input onclick="filter_doc()"  type="radio"  name="rd_estado" value="encurso"  />En curso</div>
               <div style="font-size: 12px;"><input onclick="filter_doc()" type="radio"  name="rd_estado" value="archivados"  />Archivados</div>
               <!--div style="font-size: 12px;"><input onclick="filter_doc()" type="radio"  name="rd_estado" value="eliminados"  />Eliminados</div-->
            </div>
      </li>      
      <li class="li_title_doc li_bg_color_gris" style="padding-bottom:10px;padding-top: 10px;height: auto;float: left;width: 100%;">
           <div style="float: left;margin-left: 0px;" class="texto">

               <ul style="margin: 0px;padding: 0px;" >
                    <li class="li-option-user texto_titulo" style="padding-top: 0px;margin-right: 10px;height: 15px;">
                        <div style="float: left;width: 100%;">
                            Desde:<span style="margin-left: 85px;">Hasta:</span>
                        </div>
                    </li>
                    <li class="li-option-user texto_titulo" style="padding-top: 0px;margin-right: 10px;" >
                       <div style="float: left;width: auto;">
                            <input  style="width: 72px;" type="text" id="dpicker-desde">
                        </div>
                         <div style="float: left;width: auto; margin-left:5px;margin-top: 3px;">
                             <a id="show-dp-d" href="javascript:void(0);">
                                   <?php echo image_tag('images-ui/cal.gif') ?>
                             </a>
                        </div>
                        <div style="float: left;width: auto; margin-left: 6px;">
                            <input  style="width: 72px;" type="text" id="dpicker-hasta">
                        </div>
                          <div style="float: left;width: auto; margin-left:5px;margin-top: 3px;">
                             <a id="show-dp-h" href="javascript:void(0);">
                                  <?php echo image_tag('images-ui/cal.gif') ?>
                             </a>
                        </div>
                    </li>
                  
                </ul>
            </div>
       </li>
      
      
       <li class="li_title_doc li_bg_color_etiquetas" style="float: left;width: 100%;">
          <div class="li_text_rigth texto_titulo">Etiquetas</div>
          <div class="li_icon_rigth"><?php echo image_tag('implementacion/titulo_etiq.gif') ?></div>
      </li>
       <li class="li_title_doc li_bg_color_gris" style="padding-bottom:10px;padding-top: 10px;height: auto;float: left;width: 100%;">
           <div style="float: left;">
               <?php include_component('componente', 'category') ?>
           </div>
       </li>

       <!--
        <li class="li_title_doc li_bg_color_etiquetas" style="float: left;width: 100%;">
          <div class="li_text_rigth texto_titulo">Eliminados</div>
          <div class="li_icon_rigth"><?php echo image_tag('implementacion/titulo_etiq.gif') ?></div>
        </li>
        <li class="li_title_doc li_bg_color_gris" style="padding-bottom:10px;padding-top: 10px;height: auto;float: left;width: 100%;">
           <div style="float: left;">
               <?php // include_component('componente', 'delete_doc') ?>
           </div>
       </li>

       -->
 </ul>

<script type="text/javascript">

function filter_doc(){
    var check = null;
    if($('input[name=ck-acta]').is(':checked') && $('input[name=ck-acuerdo]').is(':checked')){
        f_list_alldoc();
    }else{
        if($('input[name=ck-acta]').is(':checked')){
            check = 0;
        }else if($('input[name=ck-acuerdo]').is(':checked')){
            check = 1;
        }
        f_list_doc(check,{'url':'<?php echo url_for('util/listar_documentos') ?>'});
    }
}

// f_list_doc (acuerdo/acta , estado)
//1 = acuerdo  //  1= pendiente
//0 = acta     //  2= evaluado

$("#mostrar-acuerdo").click(function(){
   if($('input[name=ck-acuerdo]').is(':checked')){
      $('#mostrar-acuerdo').removeClass('content_li_hover').addClass('content_li');
      $('input[name=ck-acuerdo]').attr('checked',false);
      $('#img-ck-acuerdo').removeClass().addClass('style_uncheck');


      if($('input[name=ck-acta]').is(':checked')){
           f_list_doc(0,{'url':'<?php echo url_for('util/listar_documentos') ?>'});
       }else{
           $("#div_lista_doc").html('<span class="texto" style="padding-left: 70px;">Seleccione una categoria</span>');
           $("#title-options-avanz-left").html('');
       }
       
   }else{
      $('#mostrar-acuerdo').removeClass('content_li').addClass('content_li_hover');
      $('input[name=ck-acuerdo]').attr('checked',true);
      $('#img-ck-acuerdo').removeClass().addClass('style_check');

      if($('input[name=ck-acta]').is(':checked')){
           f_list_alldoc();
       }else{
           f_list_doc(1,{'url':'<?php echo url_for('util/listar_documentos') ?>'});
       }


   }
 });

$("#mostrar-acta").click(function(){
   if($('input[name=ck-acta]').is(':checked')){
       $('#mostrar-acta').removeClass('content_li_hover').addClass('content_li');
       $('input[name=ck-acta]').attr('checked',false);
       $('#img-ck-acta').removeClass().addClass('style_uncheck');

       if($('input[name=ck-acuerdo]').is(':checked')){             
           f_list_doc(1,{'url':'<?php echo url_for('util/listar_documentos') ?>'});
       }else{


          $("#div_lista_doc").html('<span class="texto" style="padding-left: 70px;">Seleccione una categoria</span>');
          $("#title-options-avanz-left").html('');

       }

 }else{
         
       $('#mostrar-acta').removeClass('content_li').addClass('content_li_hover');
       $('input[name=ck-acta]').attr('checked',true);
       $('#img-ck-acta').removeClass().addClass('style_check');

      if($('input[name=ck-acuerdo]').is(':checked')){
             f_list_alldoc();
       }else{         
           f_list_doc(0,{'url':'<?php echo url_for('util/listar_documentos') ?>'});
       }
 }
 });

function f_list_alldoc(){
    var tipo_doc = "";
    if($('input[name=ck-acuerdo]').is(':checked') || $('input[name=ck-acta]').is(':checked')){
        if($('input[name=ck-acuerdo]').is(':checked') && $('input[name=ck-acta]').is(':checked')){
            tipo_doc="";
        }else{
            if($('input[name=ck-acuerdo]').is(':checked')){
                tipo_doc = "&tipo_documento=acuerdo";
            }else{
                tipo_doc = "&tipo_documento=acta";
            }
        }
    }else{
        tipo_doc="";
    }

    if($("#dpicker-desde" ).val() > $( "#dpicker-hasta").val()){
        $("#dpicker-desde").val('');
        $("#dpicker-hasta").val('');
    }
       
    $("#div_detail_doc").html('');
    $.ajax({
        type: "POST",
        url: "<?php echo url_for('@listar_documentos_avanzado') ?>",
        data: "rad_estado="+$("input[name='rd_estado']:checked").val()+tipo_doc+"&ck_date_inicial="+$("#dpicker-desde").val()+"&ck_date_final="+$("#dpicker-hasta").val(),
        success: function(datos){
            $("#title-options-avanz-left").html('Listado de Acuerdos-Actas');
            $("#div_lista_doc").html(datos);
        }
    });
}

$(document).ready(function(){

$(document).click(function(e){
     if($("#div-pnl-filter-time").is(":visible")){
         if($(e.target).is('#div-pnl-filter-time'))return;
         if($(e.target).is('#div-pnl-filter-time *'))return;
         if($(e.target).is('#ui-datepicker-div *'))return;
         if($(e.target).is('.ui-datepicker-header *'))return;
         $('#div-pnl-filter-time').hide();
     }
     else{
         if($(e.target).is('#show-pnl-filter-time *')){
             $('#div-pnl-filter-time').show();
         }

     }
});


 

});

        

    

</script>
